<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">{{Lang.lang('發布掛單')}}</view>
			<view class="back"></view>
			<!-- <view class="rule">规则</view> -->
		</view>
		<view class="clear_box"></view>




		<view class="page_content">
			<view class="page_title">
				<view class="title">{{Lang.lang('當前餘額')}}</view>
			</view>
			<view class="personal_list">
				<input placeholder-style="color: #A5A7AD" v-model="wallet_info.yydm" disabled />
			</view>
		</view>

		<view class="page_content">
			<view class="page_title">
				<view class="title">{{Lang.lang('出售价格')}}</view>
			</view>
			<view class="personal_list">
				<input placeholder-style="color: #A5A7AD" v-model="otc_yydm_sell_price" disabled />
			</view>
		</view>


		<view class="page_content">
			<view class="page_title">
				<view class="title">{{Lang.lang('出售數量')}}</view>
			</view>
			<view class="personal_list">
				<view class="title">YYDM</view>
				<input placeholder-style="color: #A5A7AD" v-model="num" />
			</view>
		</view>


		<view class="confirm" @click="autoPupu">{{Lang.lang('發布掛單')}}</view>


		<!-- 输入安全码 -->
		<view class="pupu_box" v-if="pupu" @tap="autoPupu">
			<view class="show_box" @tap.stop="">
				<view class="title">{{Lang.lang('請輸入交易密碼')}}</view>
				<view class="input">
					<input type="password" v-model="pay_password" :placeholder="Lang.lang('請輸入交易密碼')" />
				</view>
				<view class="menu_box">
					<view class="menu" @tap="autoPupu">{{Lang.lang('取消')}}</view>
					<view class="menu" @click="otcYydmSell">{{Lang.lang('確定')}}</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				lang: 'en',
				link: '',
				pupu: false,
				scrrol: false,
				info: '',
				num: 0,
				otc_yydm_sell_price: 0,
				wallet_info: {
					yydm: 0
				},
				pay_password: ''
			}
		},
		onLoad() {
			let that = this;
			that.loadData();
		},
		onShow() {

		},
		methods: {
			loadData() {
				let that = this;
				that.Net._post('api/wallet/otcYydmSellIndex', {}, res => {
					if (res.code == 200) {
						that.otc_yydm_sell_price = res.data.otc_yydm_sell_price
						that.wallet_info = res.data.wallet_info
						that.num = 0
					}
				});
			},
			autoPupu() {
				let that = this;
				that.pay_password = '';
				that.pupu = !that.pupu;
			},
			otcYydmSell() {
				let that = this;
				that.Net._post('api/wallet/otcYydmSell', {
					num: that.num,
					pay_password: that.pay_password
				}, res => {
					if (res.code == 200) {
						that.Msg.Success(res.msg)
						setTimeout(function() {
							that.backPage()
						}, 500)
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
	}
</script>

<style>
	.header {
		background-color: transparent !important;
	}

	.header .text {
		text-align: center;
	}

	.page_content {
		width: 92%;
		margin: 0 auto;
	}

	.scrrolHeader {
		width: 100%;
		background-color: #1A1A1A !important;

	}

	.page_title {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 4vw;
	}

	.page_title .title {
		font-size: 4.5vw;
		color: #fff;
		font-weight: bold;
		flex: 1;
	}

	.page_title .arrow {
		display: flex;
		align-items: center;
		font-size: 4vw;
		color: #fff;
	}

	.personal_list {
		width: 100%;
		height: 50px;
		margin: 3vw auto 0vw;
		padding: 0vw 3vw;
		display: flex;
		background-color: #F9F9F9;
		border-radius: 2vw;
		position: relative;
	}

	.personal_list .title {
		height: 50px;
		line-height: 50px;
		font-size: 3.5vw;
		color: #000;
		margin-right: 10px;
		width: 25%;
	}

	.personal_list input {
		height: 50px;
		line-height: 50px;
		font-size: 3.5vw;
		color: #000;
		width: calc(100% - 150px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.personal_list .yzm {
		text-align: right;
		line-height: 30px;
		height: 30px;
		font-size: 3.5vw;
		color: #fff;
		background-color: #0084FF;
		border-radius: 10px;
		overflow: hidden;
		padding: 0vw 2vw;
		margin-top: 3vw;
	}

	.yzm1 {
		line-height: 50px;
		height: 50px;
		font-size: 12px;
		color: gray;
	}



	/*  */
	.pupu_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pupu_box .show_box {
		width: 70%;
		background-color: #2B2B2B;
		border-radius: 3vw;
		padding: 5vw 0 0 0;
		position: relative;
	}

	.pupu_box .show_box .title {
		width: 100%;
		text-align: center;
		font-size: 4vw;
		color: #fff;
		font-weight: bold;
		margin-bottom: 5vw;
	}

	.pupu_box .show_box .input {
		width: 84%;
		margin: 0 auto;
		background-color: #222222;
		border-radius: 2vw;
	}

	.pupu_box .show_box .input input {
		width: 100%;
		height: 12vw;
		line-height: 12vw;
		font-size: 3.5vw;
		color: #fff;
		text-align: center;
	}

	.pupu_box .show_box .menu_box {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 5vw;
	}

	.pupu_box .show_box .menu_box .menu {
		flex: 1;
		height: 12vw;
		line-height: 12vw;
		font-size: 3.8vw;
		text-align: center;
	}

	.pupu_box .show_box .menu_box .menu:nth-child(1) {
		border-radius: 0 0 0 3vw;
		background-color: #414141;
		color: #fff;

	}

	.pupu_box .show_box .menu_box .menu:nth-child(2) {
		border-radius: 0 0 3vw 0;
		color: #fff;
		background-color: #0155FF;
	}
</style>